<template>
  <div>
    <el-table
    :border="tableColumn.border"
    :data="tableData"
    :header-cell-style="{background:global.mainColor}"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      v-if="tableColumn.selection"
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        v-for="(item,index) in tableColumn.column"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
       <!-- solt 自定义列-->
       <template v-if="item.type ==='slot'" slot-scope="scope">
            <slot :name="'col-' + item.prop" :row="scope.row"></slot>
        </template>
          <template v-else slot-scope="scope">
            <span v-if="item.formatter">
            {{item.formatter(scope.row)}}
          </span>
          <span v-else>{{scope.row[item.prop]}}</span>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'JblTable',
  props: {
    // 表格配置
    tableColumn: {
      type: Object,
      default: () => {
        return {
          column: [
            {
              width: '180',
              prop: 'name',
              label: '名称'
            },
            {
              width: '180',
              prop: 'status',
              label: '状态'
            },
            {
              width: '180',
              prop: 'date',
              label: '时间'
            }
          ] }
      }
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return [
          {
            name: '222',
            status: 2,
            date: '3200'
          },
          {
            name: '222',
            status: 2,
            date: '3200'
          },
          {
            name: '222',
            status: 2,
            date: '3200'
          }
        ]
      }
    }
    // formatter: {
    //   type: Function
    // }
  },
  data() {
    return {}
  },
  computed: {
  },
  created() {},
  methods: {
    // 全选
    handleSelectionChange(val) {
      this.$emit('selectionChange', val)
    }
  }
}
</script>
